<script setup>
import {onBeforeRouteUpdate, useRoute} from 'vue-router'
import {onMounted, ref} from "vue";

/*  data */
const route = useRoute()
const subActiveRouter=ref()
/*  生命周期   */
onBeforeRouteUpdate(async (to)=>{
  console.log(to);
  subActiveRouter.value=to.name;
})

onMounted(() => {
  subActiveRouter.value=route.matched[route.matched.length-1].name;
})

/*  funcition   */

</script>

<template>
  <div>
    <el-menu class="sub-menu" mode="horizontal" router :default-active="subActiveRouter">
      <el-menu-item index="Activity" :route="{name:'ActivityList'}"><el-icon><Coin/></el-icon>活动管理</el-menu-item>
      <el-menu-item index="Promo" :route="{name:'Promo'}"><el-icon><DataAnalysis/></el-icon>推广码</el-menu-item>
      <el-menu-item index="Stat" :route="{name:'Stat'}"><el-icon><Document/></el-icon>数据统计</el-menu-item>
      <el-menu-item index="Fans" :route="{name:'Fans'}"><el-icon><Setting/></el-icon>参与粉丝</el-menu-item>
    </el-menu>
    <router-view></router-view>
  </div>
</template>

<style scoped>
.sub-menu {
  height: 100%;
}

.sub-menu .el-menu-item {
  line-height: 40px;
  height: 40px;
  vertical-align: middle;
  font-size: 13px;
}

.sub-menu .el-menu-item i {
  margin-top: -3px;
}
</style>